<template>
  <div>
    <a-modal
      :title="title"
      :visible="visibleStatus"
      :confirm-loading="state.confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >

      <a-form ref="form" :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="代理商">
          <agent-by-phone-selection v-decorator="['agent', {}]" @change="value => currentSelectAgentObj = value" />

          <a-form-item v-if="currentSelectAgentObj">
            代理团队业绩: {{ currentSelectAgentObj.team_performance || 0 | formatAmount }}
          </a-form-item>
        </a-form-item>

        <a-form-item label="合伙人等级">
          <a-select
            v-decorator="['level', { initialValue: 1 }]"
          >
            <a-select-option :value="1">有限合伙人</a-select-option>
            <a-select-option :value="2">邀约合伙人</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>

    </a-modal>
  </div>
</template>

<script>
import { savePartner } from '@/api/proxy'
import AgentByPhoneSelection from '@/components/AgentByPhoneSelection/AgentByPhoneSelection'

export default {
    name: 'PartnersForm',
    components: { AgentByPhoneSelection },
    data () {
      return {
        state: {
          confirmLoading: false
        },

        title: '代理升合伙人',
        visibleStatus: this.visible,
        form: this.$form.createForm(this),
        currentSelectAgentObj: null
      }
    },
    props: {
      visible: {
        default: false,
        type: Boolean
      }
    },
    watch: {
      visible (val) {
        this.visibleStatus = val
      }
    },
    methods: {
      handleOk () {
        this.state.cnfirmLoading = true

        this.form.validateFields((err, values) => {
          if (err !== null) {
            this.state.confirmLoading = false
          }

          values.agent = values.agent && values.agent.id // 取 id

          savePartner(values).then(res => {
            this.$emit('visible', false)
            this.$emit('refreshList')
          }).finally(_ => {
            this.state.confirmLoading = false
          })
        })
      },
      handleCancel (e) {
        this.$emit('visible', false)
      }
    }
  }
</script>

<style scoped>

</style>
